<template>
  <div :class="$style.board + ' ' + $style.mini">
    <el-dialog v-model="open" fullscreen :before-close="backStorage">
      <div style="width: 100%">
        <div
          style="
            position: relative;
            width: 100%;
            overflow: hidden;
            margin: auto 0;
            text-align: center;
          "
        >
          <img
            style="
              position: absolute;
              left: 22px;
              top: 10px;
              display: inline-block;
              width: auto;
              height: 30px;
            "
            src="../../../assets/images/favorite3.png"
          />
          <h3
            style="
              display: inline-block;
              color: red;
              font-weight: bold;
              font-size: 32px;
            "
          >
            机 台 运 行 状 态 看 板
          </h3>
          <div style="color: #ffd700; text-align: center; font-size: 16px">
            当前实时时间:{{ date }}
          </div>
        </div>
      </div>
      <div :class="$style.content">
        <div style="width: 99%; height: 760px; overflow: hidden">
          <div>
            <div :class="$style.box" v-for="(group, indexg) in groupJtm">
              <div
                v-for="(i, index) in group"
                :data-index="index"
                :data-jtbh="i.kblJtbh"
                @click="show_change(i)"
                :key="i.kblJtbh"
              >
                <div style="position: relative">
                  <div :class="$style.xia_all">
                    <span :class="$style.parentYi">
                      <!--  异常停机图标-->
                      <Icon
                        :class="$style.yichang"
                        v-if="i.kblJps > 5"
                        type="logo-html5"
                        color="red"
                      />
                      <Icon
                        type="md-cog"
                        v-if="i.kblBlflag"
                        style="
                          position: absolute;
                          left: 51px;
                          z-index: 999;
                          top: 17px;
                          font-size: 26px;
                        "
                        color="red"
                      />
                    </span>
                    <!--         超出标准工时       v-if="i.kblWaring==1"-->
                    <Icon
                      type="ios-alarm"
                      v-if="i.kblWaring == 1"
                      style="
                        position: absolute;
                        right: 38px;
                        z-index: 999;
                        bottom: 4px;
                        font-size: 28px;
                      "
                      color="green"
                    />
                    <!--        换单        v-if="i.kblHdflag==1"-->
                    <Icon
                      type="md-shuffle"
                      v-if="i.kblHdflag == 1"
                      style="
                        position: absolute;
                        left: 137px;
                        z-index: 999;
                        bottom: 4px;
                        font-size: 26px;
                      "
                      color="#ff8100"
                    />

                    <img
                      v-if="i.firstPartState === 0 || i.firstPartState === 3"
                      src="@/assets/images/jtState/sj.png"
                      alt=""
                    />
                    <img
                      v-if="i.firstPartState === 1"
                      src="@/assets/images/jtState/sj-doing.png"
                      alt=""
                    />
                    <Icon
                      type="md-sad"
                      v-if="i.kblCxsjflag == 1"
                      style="
                        position: absolute;
                        left: 88px;
                        bottom: 4px;
                        font-size: 28px;
                      "
                      color="orange"
                    />
                    <span v-if="i.kblBlflag">
                      <div
                        style="
                          position: absolute;
                          left: 99px;
                          top: 18px;
                          font-size: 16px;
                          color: red;
                          word-break: normal;
                        "
                      >
                        {{ i.kblBlv + "%" }}
                      </div>
                    </span>
                  </div>
                  <div :class="$style.xia_node">
                    <div>
                      <div
                        :class="$style.span_1"
                        :style="{ color: mapColor[i.kblColor].color }"
                      >
                        {{ i.kblJtbh }}
                      </div>
                      <div
                        :class="$style.span_2"
                        :style="{ color: mapColor[i.kblColor].color }"
                      >
                        {{ i.kblZlmc }}
                      </div>
                    </div>
                    <img
                      :class="$style.imgState"
                      :data-zb="i.kblBbdm"
                      :src="i.imgSrc"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <scroll-seamless v-if="rowJtm.length > 1" :data="rowJtm" :class-option="optionHover"></scroll-seamless> -->
        </div>
        <div style="width: 97%">
          <div class="kan">
            <div style="width: 100%; text-align: center">
              <el-row style="text-align: center">
                <div
                  style="
                    width: 100%;
                    float: left;
                    font-size: 20px;
                    color: #e5e000;
                    text-align: center;
                  "
                >
                  统计信息
                </div>
                <table style="text-align: center">
                  <tr>
                    <td v-for="item in mapColor">
                      <img
                        style="
                          width: auto;
                          height: 40px;
                          line-height: 39px;
                          margin-right: 20px;
                          vertical-align: middle;
                        "
                        :src="item.imgSrc"
                        alt=""
                      />
                      {{ item.name }}
                      <div
                        style="
                          border-top: 1px solid;
                          line-height: 39px;
                          vertical-align: middle;
                        "
                      >
                        {{ item.count }}
                      </div>
                    </td>
                    <td>
                      <img
                        style="
                          width: auto;
                          height: 40px;
                          line-height: 39px;
                          margin-right: 20px;
                          vertical-align: middle;
                        "
                        src="@/assets/images/jtState/sj.png"
                        alt=""
                      />
                      未做首件/首件NG
                      <div
                        style="
                          border-top: 1px solid;
                          height: 40px;
                          line-height: 39px;
                          vertical-align: middle;
                        "
                      >
                        {{ count_sj }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <Icon
                        type="logo-html5"
                        style="font-size: 24px; margin-right: 20px"
                        color="red"
                      />
                      异常停机
                    </td>
                    <td>
                      <Icon
                        type="md-cog"
                        style="font-size: 24px; margin-right: 20px"
                        color="red"
                      />
                      不良预警
                    </td>
                    <td>
                      <Icon
                        type="ios-alarm"
                        style="font-size: 24px; margin-right: 20px"
                        color="green"
                      />
                      超标准工时
                    </td>
                    <td>
                      <Icon
                        type="md-sad"
                        style="font-size: 24px; margin-right: 20px"
                        color="orange"
                      />
                      超标准成型时间
                    </td>
                    <td>
                      <Icon
                        type="md-shuffle"
                        style="font-size: 24px; margin-right: 20px"
                        color="#ff8100"
                      />
                      2小时内换单提示
                    </td>
                    <td>
                      <img
                        style="
                          width: auto;
                          line-height: 39px;
                          height: 40px;
                          margin-right: 20px;
                          vertical-align: middle;
                        "
                        src="@/assets/images/jtState/sj-doing.png"
                        alt=""
                      />
                      首件中
                    </td>
                  </tr>
                  <tr>
                    <td class="heightT">{{ img_1 }}</td>
                    <td class="heightT">{{ img_7 }}</td>
                    <td class="heightT">{{ img_2 }}</td>
                    <td class="heightT">{{ img_6 }}</td>
                    <td class="heightT">{{ img_5 }}</td>
                    <td class="heightT">{{ count_sjz }}</td>
                  </tr>
                </table>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        v-model="selse"
        width="800"
        :styles="{ top: '20px' }"
        :append-to-body="true"
      >
        <el-tabs :animated="false" value="tab1">
          <el-tab-pane label="机台负荷分析" name="tab1">
            <div style="text-align: center">
              <div name="left" style="width: 30%; float: left">
                <Row>
                  <Col>{{ date }}</Col>
                  <Col>
                    <div>{{ med_list[1][0].kblJtbh }}</div>
                    <div>
                      {{
                        med_list[1][0].kblBbdm + " " + med_list[1][0].kblZlmc
                      }}
                    </div>
                  </Col>
                  <Col>
                    <h6>【产能信息】</h6>
                    <span>08:00-10:00</span>
                    &#12288;
                    <span>20:00-22:00</span>
                    <input type="text" style="width: 45%" readonly />
                    &#12288;
                    <input type="text" style="width: 45%" readonly />
                    <br />
                    <span>10:00-12:00</span>
                    &#12288;
                    <span>22:00-00:00</span>
                    <input type="text" style="width: 45%" readonly />
                    &#12288;
                    <input type="text" style="width: 45%" readonly />
                    <br />
                    <span>12:00-14:00</span>
                    &#12288;
                    <span>00:00-02:00</span>
                    <input type="text" style="width: 45%" readonly />
                    &#12288;
                    <input type="text" style="width: 45%" readonly />
                    <br />
                    <span>14:00-16:00</span>
                    &#12288;
                    <span>02:00-04:00</span>
                    <input type="text" style="width: 45%" readonly />
                    &#12288;
                    <input type="text" style="width: 45%" readonly />
                    <br />
                    <span>16:00-18:00</span>
                    &#12288;
                    <span>04:00-06:00</span>
                    <input type="text" style="width: 45%" readonly />
                    &#12288;
                    <input type="text" style="width: 45%" readonly />
                    <br />
                    <span>18:00-20:00</span>
                    &#12288;
                    <span>06:00-08:00</span>
                    <input type="text" style="width: 45%" readonly />
                    &#12288;
                    <input type="text" style="width: 45%" readonly />
                  </Col>
                  <Col>
                    <span>[操作员]</span>
                    &#12288;
                    <span>[检验员]</span>
                    <br />
                    <input
                      type="text"
                      style="width: 45%"
                      v-model="name1"
                      readonly
                    />
                    &#12288;
                    <input
                      type="text"
                      style="width: 45%"
                      v-model="name2"
                      readonly
                    />
                  </Col>
                </Row>
              </div>
              <div name="right" style="width: 65%; float: left">
                <Row :gutter="16">
                  <Col span="12">
                    <div>
                      <span>【当前工单】</span>
                    </div>
                  </Col>
                  <Col span="12">
                    <div>
                      <span>【下一工单】</span>
                    </div>
                  </Col>
                </Row>
                <Row :gutter="16">
                  <Col span="12">
                    <div>
                      <span>
                        实际上线
                        <input
                          type="text"
                          style="width: 170px"
                          readonly
                          v-model="med_list[0][0].kbmSxrq"
                        />
                      </span>
                    </div>
                  </Col>
                  <Col span="12">
                    <div>
                      <span>
                        预计上线
                        <input
                          type="text"
                          style="width: 170px"
                          readonly
                          v-model="med_list[0][0].kbmYjxxsj"
                        />
                      </span>
                    </div>
                  </Col>
                </Row>
                <Row :gutter="16">
                  <Col span="12">
                    <div>
                      制造单号
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmZzdh"
                      />
                    </div>
                  </Col>
                  <Col span="12">
                    <div>
                      制造单号
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmNextzzdh"
                      />
                    </div>
                  </Col>
                </Row>
                <Row :gutter="16">
                  <Col span="12">
                    <div>
                      销售单号
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmPh"
                      />
                    </div>
                  </Col>
                  <Col span="12">
                    <div>
                      销售单号
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmNextph"
                      />
                    </div>
                  </Col>
                </Row>
                <Row :gutter="16">
                  <Col span="12">
                    <div>
                      模具编号
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmMjbh"
                      />
                    </div>
                  </Col>
                  <Col span="12">
                    <div>
                      模具编号
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmNextmjbh"
                      />
                    </div>
                  </Col>
                </Row>
                <Row :gutter="16">
                  <Col span="12">
                    <div>
                      客户编码
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmCustwldm"
                      />
                    </div>
                  </Col>
                  <Col span="12">
                    <div>
                      客户编码
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmNextcustwldm"
                      />
                    </div>
                  </Col>
                </Row>
                <Row :gutter="16">
                  <Col span="12">
                    <div>
                      物料代码
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmWldm"
                      />
                    </div>
                  </Col>
                  <Col span="12">
                    <div>
                      物料代码
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmNextwldm"
                      />
                    </div>
                  </Col>
                </Row>
                <Row :gutter="16">
                  <Col span="12">
                    <div>
                      品名规格
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmPmgg"
                      />
                    </div>
                  </Col>
                  <Col span="12">
                    <div>
                      品名规格
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmNextpmgg"
                      />
                    </div>
                  </Col>
                </Row>
                <Row :gutter="16">
                  <Col span="12">
                    <div>
                      材&#12288;&#12288;质
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmCzdm"
                      />
                    </div>
                  </Col>
                  <Col span="12">
                    <div>
                      材&#12288;&#12288;质
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmNextczdm"
                      />
                    </div>
                  </Col>
                </Row>
                <Row :gutter="16">
                  <Col span="12">
                    <div>
                      颜&#12288;&#12288;色
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmYsdm"
                      />
                    </div>
                  </Col>
                  <Col span="12">
                    <div>
                      颜&#12288;&#12288;色
                      <input
                        type="text"
                        name
                        style="width: 170px"
                        readonly
                        v-model="med_list[0][0].kbmNextysdm"
                      />
                    </div>
                  </Col>
                </Row>
                <Row :gutter="16">
                  <Col span="24">
                    入库物料
                    <input
                      type="text"
                      readonly
                      style="width: 425px"
                      v-model="med_list[0][0].kbmRkwl"
                    />
                  </Col>
                </Row>
                <strong style="float: left">【模具信息】</strong>
                <br />
                <Row :gutter="16">
                  <Col span="24">
                    模具名称
                    <input
                      type="text"
                      readonly
                      style="width: 85px"
                      v-model="med_list[0][0].kbmMjmc"
                    />
                    穴数
                    <input
                      type="text"
                      readonly
                      style="width: 35px"
                      v-model="med_list[0][0].kbmXs"
                    />
                    成型时间
                    <input
                      type="text"
                      readonly
                      style="width: 65px"
                      v-model="med_list[0][0].kbmCxsj"
                    />
                    实际时间
                    <input
                      type="text"
                      readonly
                      style="width: 85px"
                      v-model="med_list[0][0].kbmSjcxsj"
                    />
                  </Col>
                </Row>
                <Row :gutter="16">
                  <Col span="24">
                    配套设备
                    <input type="text" readonly style="width: 410px" />
                  </Col>
                </Row>
                <strong style="float: left">【统计信息】</strong>
                <br />
                <Row :gutter="24">
                  <Col span="4">
                    <div>计划数量</div>
                    <div>
                      <input
                        type="text"
                        readonly
                        style="width: 60px; background-color: yellow"
                        :value="med_list[0][0].kbmScsl"
                      />
                    </div>
                  </Col>
                  <Col span="4">
                    <div>产出数量</div>
                    <div>
                      <input
                        type="text"
                        readonly
                        style="width: 60px; background-color: #58ea58"
                        :value="med_list[0][0].kbmChsl"
                      />
                    </div>
                  </Col>
                  <Col span="4">
                    <div>良品数量</div>
                    <div>
                      <input
                        type="text"
                        readonly
                        style="width: 60px; background-color: #58ea58"
                        :value="med_list[0][0].kbmLpsl"
                      />
                    </div>
                  </Col>
                  <Col span="4">
                    <div>生产不良</div>
                    <div>
                      <input
                        type="text"
                        readonly
                        style="width: 60px; background-color: #fb7878"
                        :value="med_list[0][0].kbmZcbl"
                      />
                    </div>
                  </Col>
                  <Col span="4">
                    <div>不良率%</div>
                    <div>
                      <input
                        type="text"
                        readonly
                        style="width: 60px; background-color: #fb7878"
                        :value="med_list[0][0].kbmBlv"
                      />
                    </div>
                  </Col>
                  <Col span="4">
                    <div>进度差异</div>
                    <div>
                      <input
                        type="text"
                        readonly
                        style="width: 60px; background-color: #fb7878"
                        :value="med_list[0][0].kbmJdcy"
                      />
                    </div>
                  </Col>
                </Row>
                <p style="text-align: left"><strong>【负荷分析】</strong></p>
                <v-chart :options="option3" :class="$style.echarts3"></v-chart>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="机台效率分析" name="tab2">
            <MachineEffciency :jtbh="this.curSelect" />
          </el-tab-pane>
        </el-tabs>

        <div slot="footer" style="text-align: center">
          <!-- <Button type="primary" @click="tule">退出</Button> -->
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import BoardService from "@/api/board/board";
import MachineEffciency from "./MachineEffciency.vue";
import ScrollPane from "@/layout/components/TagsView/ScrollPane.vue";

function sery(name, data) {
  this.type = "bar";
  this.name = name;
  this.stack = "1";
  this.itemStyle = {
    normal: {
      color: "rgba(0,191,183,1)",
    },
  };
  this.data = data;
}
export default {
  components: { MachineEffciency, ScrollPane },
  data() {
    return {
      // styleObj: {
      //   width: document.body.clientWidth > 2000 ? '82%' : '100%',
      //   height: '100%',
      //   paddingLeft: document.body.clientWidth > 2000 ? '15%' : '3%',
      //   // transform:translate('-50%','-50%')
      // },
      curSelect: "A01",
      open: true,
      mapColor: {
        G: {
          name: "正常生产",
          count: 0,
          color: "green",
          imgSrc: require("../../../assets/images/jtState/green.png"),
        },
        Y: {
          name: "换模/试模/调机/换料",
          count: 0,
          color: "yellow",
          imgSrc: require("../../../assets/images/jtState/yellow.png"),
        },
        R: {
          name: "修模/机修/停机/待料/保养",
          count: 0,
          color: "red",
          imgSrc: require("../../../assets/images/jtState/red.png"),
        },
        V: {
          name: "品质",
          count: 0,
          color: "violet",
          imgSrc: require("../../../assets/images/jtState/violet.png"),
        },
        W: {
          name: "工单等待",
          count: 0,
          color: "white",
          imgSrc: require("../../../assets/images/jtState/white.png"),
        },
      },
      rowJtm: [],
      img_1: 0,
      img_2: 0,
      img_3: 0,
      img_4: 0,
      img_5: 0,
      img_6: 0,
      img_7: 0,
      img_8: 0,
      count_sjz: 0,
      count_sj: 0,
      loading: false,
      date: this.$moment().format(),
      listJtmJtbh: [],
      listJtm: [],
      groupJtm: { A: [], B: [], C: [], D: [], E: [], Z: [] },
      name1: "操作员", //操作员
      name2: "检验员", //检验员
      proed: "A02",
      selse: false,
      me_list: [],
      med_list: [
        [
          {
            kbmChsl: 0,
            gllMoeid: "",
            kbmSjcxsj: 0,
            kbmNextflinf: "",
            kbmXs: 0,
            kbmNextpmgg: "",
            kbmNextsfdm: "",
            kbmNextysdm: "",
            kbmNextdesc: "",
            gllGlid: "",
            kbmZtbz: 0,
            kbmNextwldm: "",
            kbmNextmjbh: "",
            kbmMjmc: "",
            kbmGzzt: "",
            kbmSjsj: 0,
            kbmPh: "",
            kbmCount: 0,
            kbmWxbl: 0,
            kbmNextszrate: "",
            kbmHssj: 0,
            kbmMjbh: "",
            kbmScsl: 0,
            kbmYsdm: "",
            kbmPmgg: "",
            kbmWldm: "",
            kbmHmsj: 0,
            kbmBlsl: 0,
            kbmNextinf: "",
            kbmSfdm: "",
            kbmNextcustwldm: "",
            kbmDesc: "",
            kbmNextwlpm: "",
            kbmGzztmc: "",
            kbmJhsl: 0,
            kbmWlpm: "",
            kbmRkpmgg: "",
            kbmCxsj: 0,
            kbmBlv: 0,
            kbmMoeid: 0,
            kbmYjxxsj: "",
            kbmSzrate: "",
            kbmJtbh: "",
            kbmCzdm: "",
            kbmFlinf: "",
            kbmBbdm: "",
            kbmXxrq: "",
            kbmTjbl: 0,
            kbmKssj: "",
            kbmYjgs: 0,
            kbmMz: 0.0,
            kbmCustwldm: "",
            kbmNextid: 0,
            kbmNextczdm: "",
            kbmMjsb: "",
            gllGlxh: "",
            kbmKcsl: 0,
            kbmJdcy: 0,
            kbmNextzzdh: "",
            kbmSxrq: "",
            kbmZcbl: 0,
            kbmLpsl: 0,
            kbmJssj: "",
            kbmJz: 0.0,
            kbmGcxh: "",
            kbmNextgcxh: "",
            kbmNextph: "",
            kbmMofid: 0,
            kbmRkwl: "",
            kbmZzdh: "",
            kbmTjsj: 0,
          },
        ],
        [
          {
            kblZlgs: 0,
            kblHdflag: 0,
            kblHdinf: "",
            kblZldm: "",
            kblCcsl: 0,
            kblDdgs: 0,
            kblYyms: " ",
            kblJtbh: "",
            kblZlmc: "",
            kblWkname: "",
            kblCygs: 0,
            kblCxsjms: "",
            kblByinf: "",
            kblJps: 0,
            kblInfms: "",
            kblBbdm: "",
            kblBlv: 0,
            kblBlflag: 0,
            kblLpflag: 0,
            kblCxsjflag: 0,
            kblColor: "",
            kblWaring: 0,
            kblKssj: "",
          },
        ],
        [],
        [],
        [
          {
            wkmLb: "",
            wkmName: "",
            wkmZwmc: "",
            wkmWkno: "",
            wkmPicFile: "",
          },
          {
            wkmLb: "",
            wkmName: "",
            wkmZwmc: "",
            wkmWkno: "",
            wkmPicFile: "",
          },
        ],
      ],
      styleObject: {
        width: "30px",
        height: "20px",
        color: "silver",
        border: "1px",
      },
      option3: {
        // title: {
        //   text: "负荷分析",
        //   x: "left"
        // },
        backgroundColor: "rgba(203, 206, 202,0.7)",
        // "tooltip": {//鼠标hover
        //     "trigger": "axis",
        //     "axisPointer": {
        //         "type": 'shadow'
        //     }
        // },
        grid: {
          borderWidth: 0,
          top: 45,
          left: 30,
          bottom: 25,
          textStyle: {
            color: "#555",
          },
        },
        legend: {
          // "type": 'scroll',
          data: ["正常生产", "异常停机", "排程异常", "停机", "换模", "首件"],
          itemWidth: 20,
          top: 5,
          textStyle: {
            fontSize: 11,
          },
          // "align":"right",
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            splitLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#555",
              },
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              // rotate: 15,
            },
            nameTextStyle: {
              color: "#555",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#555",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            splitArea: {
              show: false,
            },
            style: {
              color: "#555",
            },
            data: [],
          },
        ],
        series: [],
      },
    };
  },
  computed: {
    optionHover() {
      return {
        step: this.rowJtm.length > 8 ? 1 : 0, // 数值越大速度滚动越快
        // limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 190, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000,
      };
    },
  },
  methods: {
    get_info(e) {
      BoardService.getMachineBoardBaseInfo()
        .then((res) => {
          if (res.code === 200) {
            // 初始化
            for (let o in this.mapColor) {
              this.mapColor[o].count = 0;
            }
            this.img_1 = 0;
            this.img_2 = 0;
            this.img_3 = 0;
            this.img_4 = 0;
            this.img_5 = 0;
            this.img_6 = 0;
            this.img_7 = 0;
            this.img_8 = 0;
            this.count_sjz = 0;
            this.count_sj = 0;

            this.groupJtm = { A: [], B: [], C: [], D: [], E: [], Z: [] };
            this.rowJtm = [];
            // 计算数量
            this.listJtm = res.data.map((a) => {
              const tag = a.kblBbdm;
              a.imgSrc = require("../../../assets/images/jtState/" +
                this.mapColor[a.kblColor].color +
                (a.kblBbdm === "Z" ? "One" : "") +
                ".png");
              this.mapColor[a.kblColor].count++;
              this.groupJtm[tag].push(a);
              if (this.groupJtm[tag].length % 7 === 1) this.rowJtm.push("");
              if (a.kblJps > 2) this.img_1++;
              if (a.kblYxjg == 1) this.img_8++;
              if (a.kblWaring) this.img_2++; //超出标准工时
              // if (a.kblWaring)  this.img3++//超标指令处理
              if (a.kblLpflag != 0) this.img_4++;
              if (a.kblHdflag) this.img_5++;
              if (a.kblCxsjflag != 0) this.img_6++;
              if (a.kblBlflag) this.img_7++;
              // 首件状态计数
              if (a.firstPartState === 0 || a.firstPartState === 3)
                this.count_sj++;
              if (a.firstPartState === 1) this.count_sjz++;
              return a;
            });
            return;
          } else {
            alert(res.msg);
          }
        })
        .catch((err) => {
          // alert(err + "网络原因：请检查网络连接或服务器状态");
        });
    },
    show_change(e) {
      this.curSelect = e.kblJtbh;
      this.proed = e.kblJtbh;
      this.change();
    },
    change() {
      this.get_chart();
      BoardService.getMachineLoad(this.proed)
        .then((res) => {
          if (res.code === 200) {
            this.me_list = this.med_list;
            this.med_list = res.data;
            if (this.med_list[4] && this.med_list[4].length == 2) {
              this.name1 = this.med_list[4][0].wkmName;
              this.name2 = this.med_list[4][1].wkmName;
            } else {
              this.name1 = "";
              this.name2 = "";
            }
          } else {
            alert(res.msg);
          }
        })
        .catch((err) => {
          alert(err + "网络原因：请检查网络连接或服务器状态");
        });
      this.selse = true;
    },
    get_chart() {
      let data = {
        deviceEnd: this.proed + "ZZZZZZZZZZ",
        deviceStart: this.proed,
        timeEnd: new Date(),
        timeStart: new Date(new Date().getTime() - 7000 * 86400),
      };
      BoardService.getProduceState(data).then((res) => {
        let series = [];
        let zcsc = new sery("正常生产", []);
        let yctj = new sery("异常停机", []);
        let pcyc = new sery("排程异常", []);
        let tj = new sery("停机", []);
        let hm = new sery("换模", []);
        let sj = new sery("首件", []);
        for (let i of res.data[0]) {
          zcsc.data.push(i.val_xzA);
          yctj.data.push(i.val_63);
          pcyc.data.push(i.val_62);
          tj.data.push(i.val_56);
          hm.data.push(i.val_50);
          sj.data.push(i.val_53);
        }
        zcsc.itemStyle.normal.color = "green";
        yctj.itemStyle.normal.color = "orange";
        pcyc.itemStyle.normal.color = "yellow";
        tj.itemStyle.normal.color = "blue";
        hm.itemStyle.normal.color = "gray";
        sj.itemStyle.normal.color = "c21fea";

        series.push(zcsc);
        series.push(yctj);
        series.push(pcyc);
        series.push(tj);
        series.push(hm);
        series.push(sj);
        this.option3.series = series;
      });
    },

    tule() {
      this.med_list = this.me_list;
      this.selse = false;
    },
    backStorage() {
      // 返回上级路由并关闭当前路由
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      );
      this.$router.push({ path: "/index" });
    },
    creatIntvers() {
      // 获取机台
      BoardService.getMachines().then((res) => {
        if (res.code === 200) {
          this.listJtmJtbh = res.data.map((a) => a.jtmJtbh);
          this.get_info();
          // 定时更新机台状态信息
          if (this.timerJt) clearInterval(this.timerJt);
          this.timerJt = setInterval(() => {
            this.get_info();
          }, 60000);
        } else {
          alert(res.msg);
        }
      });
      //显示时间
      if (this.timer) clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.date = this.$moment().format();
      }, 1000);
    },
  },
  mounted() {
    //给负荷分析添加x轴
    let x = [];
    let time = new Date().getTime();
    for (let i = 0; i < 8; i++) {
      let item = new Date(time);
      x.unshift(item.getMonth() + 1 + "/" + item.getDate() + "");
      time -= 86400 * 1000; //减一天
    }
    this.option3.xAxis[0].data = x;
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.creatIntvers();
      // 通过 `vm` 访问组件实例
    });
  },
  beforeRouteLeave(to, from, next) {
    if (this.timerJt) clearInterval(this.timerJt);
    if (this.timer) clearInterval(this.timer);
    next();
  },
};
</script>
<style lang="scss" module>
@use "./board.scss";
.mini {
  .box {
    .imgState {
      height: 80px;
      width: 140px;
    }
    .xia_all {
      img {
        left: 120px;
        top: 30px;
        z-index: 9999;
        height: 50px;
        position: absolute;
      }
    }
  }
}
.board {
  :global {
    .el-dialog {
      background-image: url("../../../assets/images/bj.jpg");
      background-size: 100% 100%;
      .el-dialog__header {
        height: 30px;
      }
    }
  }
  .content {
    display: flex;
    width: 100%;
    overflow: hidden;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-around;
  }
  .box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    > div {
      position: relative;
      padding: 6px;
    }
  }
  table {
    width: 100%;
    height: 50px;
    border-spacing: 0;
    border-collapse: collapse;
    text-align: center;
  }
  table td {
    height: 40px;
    width: 82px;
    font-size: 18px;
    color: #a6d96a;
    text-align: center;
    border: 1px solid greenyellow;
  }
  .imgState {
    height: 85px;
    width: 175px;
    &[data-zb="Z"] {
      transform: rotateY(-180deg);
    }
  }
  i {
    font-size: 16px;
  }
  .top {
    /* 头部字体样式状态 工单等待。。。*/
    height: 20px;
    width: 50px;
    border: 1px solid #a5a5a5;
    color: white;
    text-align: center;
  }
  .btn {
    width: 230px;
    margin-top: 3px;
  }
  .top_1 {
    /* 头部字体样式状态 正常*/
    height: 20px;
    width: 50px;
    border: 1px solid #a5a5a5;
    color: #35da35;
    text-align: center;
  }
  .xia_all {
    position: absolute;
    font-size: 14px;
    line-height: 55px;
  }
  .xia_node {
    display: flex;
    align-items: center;
    .span_1 {
      font-size: 28px;
      font-weight: bold;
      line-height: 32px;
      word-break: normal;
    }
    .span_2 {
      font-size: 20px;
      font-weight: bold;
      line-height: 32px;
      word-break: normal;
    }
  }
  .kanBan {
    position: relative;
    padding: 0;
  }
  .heightT {
    height: 28px;
  }
  .parentYi {
    width: 40px;
    height: 43px;
    display: flex;
    justify-content: center;
    align-items: center;

    .yichang {
      width: 28px;
      height: 28px;
      line-height: 25px;
      border: 3px solid red;
      font-size: 20px;
      border-radius: 50%;
      position: absolute;
      left: 45px;
      top: 54px;
      z-index: 999;
      -webkit-animation: scaleout 0.8s infinite ease-in-out;
      animation: scaleout 0.5s infinite ease-in-out;
    }
    .yichangZ {
      width: 28px;
      height: 28px;
      line-height: 25px;
      border: 3px solid red;
      font-size: 20px;
      border-radius: 50%;
      position: absolute;
      left: 73px;
      top: 25px;
      z-index: 1000;
      -webkit-animation: scaleout 0.8s infinite ease-in-out;
      animation: scaleout 0.5s infinite ease-in-out;
    }
    .yichangGr {
      width: 35px;
      height: 35px;
      line-height: 28px;
      border: 5px solid green;
      font-size: 24px;
      border-radius: 50%;
      position: absolute;
      left: 2px;
      -webkit-animation: scaleout 0.8s infinite ease-in-out;
      animation: scaleout 0.5s infinite ease-in-out;
    }

    @-webkit-keyframes scaleout {
      0% {
        -webkit-transform: scale(1);
      }
      100% {
        -webkit-transform: scale(1.1);
        opacity: 0;
      }
    }
    @keyframes scaleout {
      0% {
        transform: scale(1);
        -webkit-transform: scale(1);
      }
      100% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        opacity: 0;
      }
    }
  }
}
.echarts3 {
  height: 150px;
  width: 470px;
  margin: 0 auto;
  border-radius: 5px;
}
</style>
